Texto con efecto Gradient

En WebDesignerWall nos muestran una técnica para añadir efecto gradient en texto con CSS y una imagen PNG.

Cada ejemplo contiene el código HTML que lo añadiremos en un gadget también de HTML y los estilos CSS que los incluiremos en plantilla edición de HTML justo antes de ]]></b:skin>

En los estilos he añadido la imagen de los ejemplos, quiere eso decir que si vamos a utilizar alguno de forma definitica es recomendable descargar la imagen, subirla a nuestro servidor y sustituirla por la que hay ahora con el fin de no perder la imagen.

Hello, I'm Shinely

Ver código->

<div class="gradient5">
<h1><span></span>Texto-título</h1>
</div>

.gradient5 {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.gradient5 h1 {
color:#FFFFFF;
font:330%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-1px;
margin:0;
position:relative;
}
.gradient5 h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOoUlFttSK1UZECKMo_T2KwYiv8a_Nc4D_KuhVCB_ScJCy9YYv0HAYh3O0YH5YUg_Xyzf6kAu-XwPr0Mfy_6Dgl81jILxB9UXKet1AsrCnnMdprg_hvv8oTAo-UUaSkfGXE91/s0/gradient-shine.png") repeat-x scroll 0 0 transparent;
display:block;
height:64px;
position:absolute;
width:100%;
}

Vertical Stripe

Ver código->

<div class="gradient6">
<h1><span></span>Texto-título</h1>
</div>

.gradient6 {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.gradient6 h1 {
color:#FFFFFF;
font:bold 310%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-2px;
margin:0;
position:relative;
text-transform:uppercase;
}
.gradient6 h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhht8f_h1LxNRlfqRBsPfagDf5-uXEt1XkCb_i_xk7nxu6ow6ocMdbYFTonl6AUar0if-FI5-aUX7VvhSvBSZsi_mF1cHZB05-AupO9qOTByqmWm6j4ktkYNTyZaV3Yy1iZpJYN/s0/gradient-dark-stripe.png") repeat-x scroll 0 0 transparent;
bottom:-0.1em;
display:block;
height:29px;
position:absolute;
width:100%;
}

Horizontal Stripe

Ver código->

<div class="gradient7">
<h1><span></span>Texto título</h1>
</div>

.gradient7 {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.gradient7 h1 {
color:#FFFFFF;
font:bold 310%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-2px;
margin:0;
position:relative;
text-transform:uppercase;
}
.gradient7 h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhht8f_h1LxNRlfqRBsPfagDf5-uXEt1XkCb_i_xk7nxu6ow6ocMdbYFTonl6AUar0if-FI5-aUX7VvhSvBSZsi_mF1cHZB05-AupO9qOTByqmWm6j4ktkYNTyZaV3Yy1iZpJYN/s0/gradient-dark-stripe.png") repeat-x scroll 0 0 transparent;
bottom:-0.1em;
display:block;
height:29px;
position:absolute;
width:100%;
}

Wow, Zebra

Ver código->

<div class="pattern">
<h1><span></span>Texto-título</h1>
</div>

.pattern {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.pattern h1 {
color:#FFFFFF;
font:bold 600%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-6px;
margin:0;
position:relative;
text-transform:uppercase;
}
.pattern h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysX0u5kJwgZ3-WDaKKQDAhrYeqRp8mYdH5JvkYWWdR9zhqeJparK9ou2AHQdXEgLSnqAztk3n5zUxrdERtik324s0EZRaCe1AzQaxG5o3fSAS5cP1evW3zenvklvOIRez1I4l/s0/pattern-zebra.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
position:absolute;
width:100%;
}

Gem@ BLOG

Al bloque "pattern" le añadimos un color de fondo en este caso es negro.
Los estilos del texto los tenemos en "pattern h1" y es ahí donde añadimos el color que se mostrará para el texto.

Con "pattern h1 span" añadimos la imagen que debe ser de fondo transparente, en formato PNG. la idea es que al tratarse de una imagen transparente permitirá visualizar el color del texto dando la sensación que es un texto con imagen.

Lo principal que debemos tener en cuenta es que el color predominante de la imagen será el mismo color que añadiremos al fondo del bloque "pattern" para que no se visualice la imagen que no cubre la totalidad del texto.

Para entenderlo un poco mejor el siguiente ejemplo sería el mismo que el anterior pero en lugar de añadir color negro de fondo que es el color que contiene la imagen añadimos color gris.

Gem@ BLOG